<template>
	<ge-page id="ge-page">
		<!-- UniApp不支持动态组件，使用v-if方式 -->
		<Home v-if="active === 'home'" />
		<Feiyi v-if="active === 'feiyi'" />
		<My v-if="active === 'my'" />
		<Category v-if="active === 'category'" />
		
		<van-tabbar 
			:active="active" 
			fixed 
			@change="changeTabbar" 
			:placeholder="true"
			:active-color="tabbarConfig.selectedColor" 
			:inactive-color="tabbarConfig.color"
		>
			<view v-for="(item, index) in tabbarConfig.list" :key="index" class="custom-tabbar-item">
				<van-tabbar-item 
					:icon="active === item.name ? item.selectedIconPath : item.iconPath" 
					:name="item.name"
				>
					{{item.text}}
				</van-tabbar-item>
			</view>
		</van-tabbar>
	</ge-page>
</template>

<script>
	import { getCustomTabBarConfig } from '@/common/config/tabbar.js'
	
	// UniApp不支持懒加载，直接导入组件
	import Home from '@/pages/home/home.vue'
	import Feiyi from '@/pages/feiyi/feiyi.vue'
	import My from '@/pages/my/my.vue'
	import Category from '@/pages/category/category.vue'
	
	export default {
		components: {
			Home,
			Feiyi,
			My,
			Category
		},
		data() {
			return {
				active: 'home',
				tabbarConfig: getCustomTabBarConfig()
			}
		},
		created() {
			console.log(uni.md5('xiaoge'))
			console.log(uni.trim('abc    b ', 'all'))
		},
		methods: {
			/**
			 * TabBar切换事件处理
			 */
			changeTabbar(e) {
				this.active = e.detail
				// 可以在这里添加页面切换的埋点统计
				console.log(`TabBar switched to: ${e.detail}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-tabbar--fixed {
		position: fixed;
	}

	.custom-tabbar-item {
		flex: 1;
	}

	::v-deep .van-tabbar-item {
		align-items: center;
		color: var(--tabbar-item-text-color, #646566);
		display: flex;
		flex-direction: column;
		font-size: var(--tabbar-item-font-size, 12px);
		height: 100%;
		justify-content: center;
		line-height: var(--tabbar-item-line-height, 1);
	}
</style>
